
<template>
  <div class="flex j-se a-c">
    <div id="line-box" class="line-box">
      <riskPie></riskPie>
    </div>
    <div class="border-box">
      <div class="cross"></div>
      <div class="triangle-footer"></div>
    </div>
    <div class="triangle"></div>
  </div>
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";
import riskPie from "./child/riskPie";
import riskBar from "./child/riskBar";
export default {
  props: {},
  data() {
    return {
      arr: [],
      riskPie: {},
      info: [],
      from: {
        name: "Tom",
      },
    };
  },
  computed: {
    newName() {
      return this.from.name;
    },
  },
  watch: {
    info(newVal) {},
    "from.name"(val) {
      console.log(val);
    },
    from: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
    newName(val) {
      console.log(val);
    },
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.info.push({
        name: "Jerry",
        age: 18,
      });
      this.from.name = "Jerry";
    }, 500);
  },
  components: {
    riskPie,
    riskBar,
  },
  methods: {},
};
</script>
<style scoped lang='scss'>
.border-box {
  width: 200px;
  height: 200px;
  position: relative;
  // background-color: red;
  .cross {
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 5px;
      background-color: #000;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &::before {
      content: "";
      position: absolute;
      width: 5px;
      height: 20px;
      background-color: #000;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &::after {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    left: 0;
    top: 0;
    border-left: 2px solid #00f;
    border-top: 2px solid #00f;
  }

  &::before {
    content: "";
    height: 10px;
    width: 10px;
    right: 0;
    top: 0;
    position: absolute;
    border-right: 2px solid #00f;
    border-top: 2px solid #00f;
  }
  .triangle-footer {
    &::after {
      content: "";
      height: 10px;
      width: 10px;
      position: absolute;
      left: 0;
      bottom: 0;
      border-left: 2px solid #00f;
      border-bottom: 2px solid #00f;
    }

    &::before {
      content: "";
      height: 10px;
      width: 10px;
      right: 0;
      bottom: 0;
      position: absolute;
      border-right: 2px solid #00f;
      border-bottom: 2px solid #00f;
    }
  }
}
.triangle {
  widows: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid #000;
  transform: rotate(180deg);
}
.line-box {
  width: 600px;
  height: 400px;
}
.bar-box {
  width: 600px;
  height: 400px;
}
</style>